// 定义一个方法

function renderStudent() {
  axios({
    url: "/student/list",
  }).then((result) => {
    const { data } = result // 除了通过打开控制台 手动选择断点之外，还可以通过debugger
    // debugger // debugger关键字的作用是 当代码运行到该位置的时候，如果是在开发者模式下，直接会在位置断一下
    // 等调试完毕，得删掉
    // const arr = []
    // data.forEach((item) => {
    //   arr.push(`<tr>
    //     <th scope="row">10</th>
    //     <td>张三</td>
    //     <td>20</td>
    //     <td>女</td>
    //     <td>1</td>
    //     <td>13261266666</td>
    //     <td>120000</td>
    //     <td>14000</td>
    //     <td>河北省承德市围场县</td>
    //     <td>
    //       <button type="button" class="btn btn-primary btn-sm">修改</button>
    //       <button type="button" class="btn btn-danger btn-sm">删除</button>
    //     </td>
    //   </tr> `)
    // })
    // {
    //     "id": 1, //学员id
    //     "name": "曾明", //姓名
    //     "age": 27, //年龄
    //     "sex": "女", //性别
    //     "phone": "15515232684", //手机号
    //     "salary": 7899, //期望薪资
    //     "truesalary": 9703, //实际薪资
    //     "province": "浙江省", //籍贯（省）
    //     "city": "宁波市", //籍贯（市）
    //     "county": "海曙区", //籍贯（县）
    //     "jing": 125.135, //籍贯所在地经度
    //     "wei": 46.562 //籍贯所在地纬度
    //     },
    // 将实际的arr渲染到页面上
    $("tbody").html(
      data.map(
        (item) =>
          `<tr>
       <th scope="row">${item.id}</th>
           <td>${item.name}</td>
           <td>${item.age}</td>
           <td>${item.sex}</td>
           <td>${item.group}</td>
          <td>${item.phone}</td>
           <td>${item.salary}</td>
           <td>${item.truesalary}</td>
          <td>${item.province}${item.city}${item.county}</td>
           <td>
             <button data-id="${item.id}" type="button" class="btn btn-primary btn-sm update">修改</button>
            <button data-id="${item.id}" type="button" class="btn btn-danger btn-sm del">删除</button>
           </td>
         </tr> `
      )
    )
  })
}
// debugger
renderStudent()
// 注册事件 执行逻辑
function registerEvent() {
  // 一开始-获取所有的省份
  axios({
    url: "/geo/province",
  }).then((result) => {
    // 直接把result的内容生成 select标签的option选项
    //    <option selected value="">--省--</option>
    const arr = result.map((item) => `<option   value="${item}">${item}</option>`)
    // 找出所有name属性为province的标签
    $("select[name=province]").html([`<option  selected value="">--省--</option>`, ...arr])
    // 得到所有的省份
  })
  // 监听省的变化 -> 获取市区的列表
  $("select[name=province]").on("change", function (event) {
    // 更新市区列表
    // 拿到当前的值
    // alert(`${event.target.value}-${$(this).val()}`)
    let pname = event.target.value // 获取省的名称
    // 需要获取省下面的市
    axios({
      url: `/geo/city`,
      params: { pname }, // 查询参数
    }).then((result) => {
      //  result 列表渲染大select上
      const arr = result.map((item) => `<option   value="${item}">${item}</option>`)
      $("select[name=city]").html([`<option  selected value="">--市--</option>`, ...arr])
    })
  })

  // 监听市的变化
  $("select[name=city]").on("change", function (event) {
    // 监听到市的变化
    let cname = event.target.value // 获取到最新的市的名字
    // 获取县需要两个参数 省名、 市名 parent()表示父节点 prev表示前一个兄弟节点
    let pname = $(this).parent().prev().find("select").val() // 先取父节点 => 前一个同级节点 => select

    axios({
      url: "/geo/county",
      params: { cname, pname },
    }).then((result) => {
      //  渲染区县内容
      const arr = result.map((item) => `<option   value="${item}">${item}</option>`)
      $("select[name=county]").html([`<option  selected value="">--县--</option>`, ...arr])
    })
  })
}
registerEvent()

// 完成新增表单的校验
// 对表单进行校验
function student() {
  // 直接生成好的规则
  return {
    fields: {
      name: {
        validators: {
          notEmpty: {
            message: "姓名不能为空",
          },
          stringLength: {
            min: 2,
            max: 10,
            message: "姓名长度2~10位",
          },
        },
      },
      age: {
        validators: {
          notEmpty: {
            message: "年龄不能为空",
          },
          greaterThan: {
            value: 18,
            message: "年龄不能小于18岁",
          },
          lessThan: {
            value: 60,
            message: "年龄不能超过60岁",
          },
        },
      },
      sex: {
        validators: {
          choice: {
            min: 1,
            max: 1,
            message: "请选择性别",
          },
        },
      },
      group: {
        validators: {
          notEmpty: {
            message: "组号不能为空",
          },
          regexp: {
            regexp: /^\d{1,2}$/,
            message: "请选择有效的组号",
          },
        },
      },
      phone: {
        validators: {
          notEmpty: {
            message: "手机号不能为空",
          },
          regexp: {
            regexp: /^1\d{10}$/,
            message: "请填写有效的手机号",
          },
        },
      },
      salary: {
        validators: {
          notEmpty: {
            message: "实际薪资不能为空",
          },
          greaterThan: {
            value: 800,
            message: "期望薪资不能低于800",
          },
          lessThan: {
            value: 100000,
            message: "期望薪资不能高于100000",
          },
        },
      },
      truesalary: {
        validators: {
          notEmpty: {
            message: "实际薪资不能为空",
          },
          greaterThan: {
            value: 800,
            message: "实际薪资不能低于800",
          },
          lessThan: {
            value: 100000,
            message: "实际薪资不能高于100000",
          },
        },
      },
      province: {
        validators: {
          notEmpty: {
            message: "省份必填",
          },
        },
      },
      city: {
        validators: {
          notEmpty: {
            message: "市必填",
          },
        },
      },
      county: {
        validators: {
          notEmpty: {
            message: "县必填",
          },
        },
      },
    },
  }
}

$(".add-form")
  .bootstrapValidator(student())
  .on("success.form.bv", function (event) {
    // 此时说明校验成功
    event.preventDefault() // 阻止默认事件
    axios({
      method: "post", // 新增类型
      url: "/student/add",
      // 新增参数
      data: $(".add-form").serialize(), // 得到的是一个字符串参数
    }).then((result) => {
      // 判断当前新增成功与否
      if (result.code === 0) {
        // 此时认为成功
        toastr.success(result.message)
        // 弹层关闭
        $("#addModal").modal("hide") // 表示关闭弹层
        // 重新渲染一下数据
        renderStudent() // 重新渲染
      } else {
        // 否则失败
        toastr.warning(result.message)
      }
    })
  })

// 注册修改按钮的事件
$("tbody").on("click", ".update", function () {
  //  显示修改的弹层
  let id = $(this).data("id") // 获取到了用户的id
  axios({
    url: "/student/one",
    params: { id }, // 查询参数
  }).then((result) => {
    if (result.code === 0) {
      // 拿到用户信息了
      // 回填数据
      let { name, age, sex, group, phone, id, salary, truesalary, province, city, county } = result.data
      $("#updateModal input[name=id]").val(id)
      $("#updateModal input[name=name]").val(name)
      $("#updateModal input[name=age]").val(age)
      $("#updateModal input[name=sex][value=" + sex + "]").prop("checked", true)
      $("#updateModal input[name=phone]").val(phone)
      $("#updateModal input[name=salary]").val(salary)
      $("#updateModal input[name=truesalary]").val(truesalary)
      $("#updateModal select[name=group]")
        .children("[value=" + group + "]")
        .prop("selected", true)
      $("#updateModal select[name=province]")
        .children("[value=" + province + "]")
        .prop("selected", true)
      $("#updateModal select[name=city]").html(`<option value="${city}">${city}</option>`)
      $("#updateModal select[name=county]").html(`<option value="${county}">${county}</option>`)
    }
  })
  $("#updateModal").modal("show") // bootstrap的方法
})

// 修改 也得完成表单校验
$(".update-form")
  .bootstrapValidator(student())
  .on("success.form.bv", function (event) {
    event.preventDefault() // 阻止默认事件
    // 调用 修改接口
    axios({
      method: "put",
      url: "/student/update",
      // 请求体参数
      data: $(".update-form").serialize(), // 可以得到一个字符串类型的参数
    }).then((result) => {
      if (result.code === 0) {
        toastr.success(result.message)
        // 关闭弹层
        $("#updateModal").modal("hide") // 隐藏 弹层
        // 更新页面的数据
        renderStudent() // 重新渲染
      } else {
        toastr.warning(result.message)
      }
    })
  })

// 删除事件
$("tbody").on("click", ".del", function () {
  // 需要知道删除谁

  // 提示一下
  if (confirm("您是否要删除该记录？？？")) {
    const id = $(this).data("id") // 获取要删除的id
    axios({
      method: "delete",
      url: "/student/delete",
      params: { id },
    }).then((result) => {
      if (result.code === 0) {
        toastr.success(result.message)
        // 重新渲染
        renderStudent() // 重新渲染
      } else {
        toastr.warning(result.message)
      }
    })
  }
})
